<!--
 * @Description: 首页
 * @Author: ZhangHan
 * @Date: 2025-07-24 17:49:22
 * @LastEditTime: 2025-08-29 17:33:18
 * @LastEditors: ZhangHan
-->
<template>
  <view class="mypage">
    <!-- 用户信息 -->
    <view class="person_info">
      <view class="top">
        <image class="avator" :src="USERICON" @click="handlePreview()" />
        <view class="info">
          <text class="name">编程猪猪侠</text>
          <text class="hap">分享技术和生活的编程猪猪侠</text>
          <view class="tag_group">
            <view class="item" :key="index" v-for="(item, index) in tagList">{{
              item
            }}</view>
          </view>
        </view>
      </view>
      <view class="bottom">
        <view class="b_item" v-for="(item, index) in bList" :key="index">
          <view class="num">{{ item?.num }}</view>
          <view class="text">{{ item?.text }}</view>
        </view>
      </view>
    </view>
    <!-- 博客分类 -->
    <view class="blog_category">
      <view class="title">工具分类</view>
      <view class="blog_list">
        <view
          class="blog_item"
          v-for="(item, index) in blogList"
          @click="handleBlog(item)"
          :key="index"
        >
          <view class="pic_round" :style="{ background: item.bg }">
            <image class="img" :src="item.icon" />
          </view>
          <view class="text_group">
            <text class="type_name">{{ item.name }}</text>
            <text class="type_num">{{ item.num }}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 文章分类 -->
    <view class="article_type">
      <view class="title">文章分类</view>
      <view
        class="article_card"
        v-for="(item, index) in articleList"
        :key="index"
        @click="go(ROUTER_PATH.CSDNWEB + `?type=${item?.urlType}`)"
      >
        <view class="card_head">
          <uni-tag
            :text="item.tag"
            type="primary"
            style="margin-right: 24rpx"
          />
          {{ item.time }}
        </view>
        <view class="atr_name">{{ item.title }}</view>
        <view class="atr_desc">{{ item.desc }}</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from "vue";
import { useLoading } from "@/hooks/useLoading";
import { onShow, onHide } from "@dcloudio/uni-app";
import { isString } from "@/utils/is";
import { handlePreviewImage } from "@/utils/common";
import USERICON from "@/static/icons/ggbond.png";
import { IMG_ALL } from "@/concacts/imgPath";
import { useTransForm } from "@/hooks/useTransForm";
import { tagList, bList, blogList, articleList } from "./data";
import { getSwipper } from "@/api/home";
import { useGo } from "@/hooks/usePage";
import { ROUTER_PATH } from "@/concacts/routerPath";

const go = useGo();

const text = ref("");
const { addTransform, destroyEventListeners } = useTransForm();

const [show, hide] = useLoading();

onShow(() => {
  show();
  // #ifdef H5
  addTransform(".blog_item", "item_active");
  addTransform(".article_card", "card_active");
  // #endif

  isString("我是")
    ? (text.value = "我是字符串")
    : (text.value = "我不是字符串");

  setTimeout(() => {
    hide();
  }, 2000);
  // initData();
});

//测试获取数据
const initData = async () => {
  const res = await getSwipper({ page: 1, pageSize: 10 });
  console.log("🚀 ~ initData ~ res:", res);
};
onHide(() => {
  // #ifdef H5
  destroyEventListeners(".blog_item", "item_active");
  destroyEventListeners(".article_card", "card_active");
  // #endif
});

//预览头像
const handlePreview = () => {
  handlePreviewImage(USERICON, [USERICON]);
};

//博客分类跳转
const handleBlog = (item: any) => {
  go(item.path);
};

// 1. 我们有一个对象 person，它有一个属性 name
const person = {
  name: "Alice",
  greet() {
    console.log(`Hello, my name is ${this.name}!`);
  },
};

// 2. 使用 Object.create() 以 person 为原型，创建一个新对象 student
const student = Object.create(person);
// 为 student 对象自身添加一个属性
student.major = "Computer Science";

// 3. 当我们访问 student 的属性时：
console.log(student.major); // "Computer Science" (来自自身)
console.log(student.name); // "Alice" (自身没有，来自原型 person)
student.greet(); // "Hello, my name is Alice!" (自身没有，来自原型 person)
console.log(student);

// 4. 原型链是：student -> person -> Object.prototype -> null
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
